<!-- 选择日期 -->
<template>
	<view class="bgff">
		<view class="bbm pt20 pm20 row fz30 pd btm">
			<view class="col" @tap="$emit('closee')">
				取消
			</view>
			<view class="col fz32 cen">
				{{dxtitle}}
			</view>
			<view class="col tr ls" @tap="queding">
				确定
			</view>
		</view>
		<picker-view v-if="visible" :indicator-style="indicatorStyle" :value="value" @change="bindChange">
			<picker-view-column>
				<view class="item" v-for="(item,index) in years" :key="index">{{item}}年</view>
			</picker-view-column>
			<picker-view-column>
				<view class="item" v-for="(item,index) in months" :key="index">{{item}}月</view>
			</picker-view-column>
			<picker-view-column>
				<view class="item" v-for="(item,index) in days" :key="index">{{item}}日</view>
			</picker-view-column>
			<picker-view-column>
				<view class="item" v-for="(item,index) in 24" :key="index">{{index}}时</view>
			</picker-view-column>
			<picker-view-column>
				<view class="item" v-for="(item,index) in 60" :key="index">{{index}}分</view>
			</picker-view-column>
		</picker-view>
	</view>
</template>

<script>
	export default {
		props:{
			dxtitle:{
				type:String
			}
		},
		data() {
			const date = new Date()
			const years = []
			const year = date.getFullYear()
			const months = []
			const month = date.getMonth() + 1
			const days = []
			const day = date.getDate()
			const hour = date.getHours()
			const Minutes = date.getMinutes()
			for (let i = 1990; i <= date.getFullYear(); i++) {
				years.push(i)
			}

			for (let i = 1; i <= 12; i++) {
				months.push(i)
			}

			for (let i = 1; i <= 31; i++) {
				days.push(i)
			}
			return {
				title: 'picker-view',
				years,
				year,
				months,
				month,
				days,
				day,
				hour,
				Minutes,
				value: [9999, month - 1, day - 1, hour,Minutes],
				/**
				 * 解决动态设置indicator-style不生效的问题
				 */
				visible: true,
				gettime:'',
				indicatorStyle: `height: ${Math.round(uni.getSystemInfoSync().screenWidth/(750/100))}px;`
			}
		},
		methods: {
			bindChange(e) {
				const val = e.detail.value
				this.year = this.years[val[0]]
				this.month = this.months[val[1]]
				this.day = this.days[val[2]]
				this.hour =  val[3]
				this.Minutes =  val[4]
			},
			chushi(int){
				return int>10?int:('0'+int)
			},
			queding(){
				this.gettime = this.year +"-" +this.chushi(this.month)+"-"+this.chushi(this.day) +' '+this.chushi(this.hour)+"："+this.chushi(this.Minutes)	
				this.$emit('queding',this.gettime)
			}
		}
	}
</script>

<style>
	picker-view {
		width: 100%;
		height: 600rpx;
		margin-top: 20rpx;
	}

	.item {
		line-height: 100rpx;
		text-align: center;
	}
</style>

